<%--

  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>贡献分析</title>

    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">
    <script src="<c:url value="/js/echarts.js"/>"></script>

    <script src="<c:url value="/js/my/commons.js"/>"></script>
    <style>
        .container {
            width: 1200px;
            margin: 20px auto;
        }

        html {
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="<c:url value="/js/my/commons.js"/>"></script>

<div class="container">
    <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title" id="LAY_mine">
            <%--按顺序自动绑定选项卡--%>
            <li lay-id="table">表格呈现</li>
            <li lay-id="echarts">图表呈现</li>
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
            <%--选项卡1--%>
            <div class="layui-form layui-form-pane layui-tab-item layui-show">

                <div class="layui-row ">
                    <div class="demoTable layui-col-md5">
                        客户名称：
                        <div class="layui-inline">
                            <input class="layui-input" name="customerName" id="reloadByCustomerName" autocomplete="off">
                        </div>
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>

                    <div class="demoTable layui-col-md5">
                        年份：
                        <div class="layui-inline">
                            <select name="year" id="reloadByYear">

                            </select>
                        </div>
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>
                </div>
                <table class="layui-hide" id="contribution_table" lay-filter="user"></table>

                <script>

                    layui.use(['table', 'form'], function () {
                        var $ = layui.$, form = layui.form;
                        $.getJSON("${pageContext.request.contextPath}/count/contribution/yearOptions.do", function (data) {
                            var option = '<option value="">全部</option>';

                            $.each(data.data, function (i, year) {
                                option += '<option value="' + year + '">' + year + '</option>'
                            });
                            $('#reloadByYear').html(option);

                            //必须重新渲染
                            form.render('select');
                        });

                        var table = layui.table;
                        //方法级渲染
                        table.render({
                            elem: '#contribution_table'
                            , url: '${pageContext.request.contextPath}/count/contribution.do'
                            , cols: [[
                                {type: 'numbers', title: '序号', width: 150, sort: true, fixed: true}
                                , {field: 'customerName', title: '客户名称', width: 400}
                                , {field: 'orderMoney', title: '订单金额', minWidth: 400, sort: true}
                            ]]
                            , id: 'forReload'
                            , page: true
                        });

                        var $ = layui.$, active = {
                            reload: function () {
                                let byCustomerName = $('#reloadByCustomerName');
                                let byYear = $('#reloadByYear');
                                //执行重载
                                table.reload('forReload', {
                                    url: '${pageContext.request.contextPath}/count/contribution.do',
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                    , where: {
                                        year: byYear.val()
                                        , customerName: byCustomerName.val()
                                    }
                                }, 'data');
                            }
                        };

                        $('.demoTable .layui-btn').on('click', function () {
                            var type = $(this).data('type');
                            active[type] ? active[type].call(this) : '';
                        });

                    });
                </script>


            </div>

            <%--选项卡2 图表--%>
            <div class="layui-form layui-form-pane layui-tab-item">
                <script>
                    $(function () {
                        //绑定一个document组件
                        var charts = echarts.init($('#div_bar')[0]);

                        // 图表的配置项和数据
                        var option = {
                            //设置标题
                            title: {
                                text: '客户贡献'
                                // , subtext: '副标题'
                            }
                            //悬停的提示
                            , tooltip: {}
                            , toolbox: { //工具箱
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            }
                            //对应数据分类的显示开关
                            , legend: {
                                data: ['aaa']
                            }

                            //横轴上的列名必要的   list<name>
                            , xAxis: {
                                data: []
                            }
                            , yAxis: {}
                            //数据  list<value>
                            , series: [{
                                //数据的分类名
                                name: '订单量'
                                //显示的类型, bar柱状体   pie 饼图...
                                , type: 'bar'
                                , data: []
                            }]
                        };
                        charts.setOption(option);

                        /*=====动态加载数据 ====================================================================*/
                        $.ajax({
                            url: '${pageContext.request.contextPath}/count/contribution.do'
                            , data: {
                                page: 1
                                , limit: 9999
                            }
                            //要求索引对应的   data[list<name>,list<value>]
                            , dataType: 'json'
                            , success: function (data) {
                                var nameList = [];
                                var valueList = [];
                                $.each(data.data, function (index, data) {
                                    nameList.push(data.customerName);
                                    valueList.push(data.orderMoney);
                                });
                                //再次渲染添加数据`
                                charts.setOption({
                                    legend: {
                                        data: nameList
                                        , orient: 'vertical'
                                        , x: 'left button'
                                    },
                                    xAxis:
                                        {
                                            data: nameList
                                        }
                                    , series: [{
                                        name: '订单量'
                                        , type: 'bar'
                                        //这里设置对应的数据
                                        , data: valueList
                                    }]
                                })
                            }
                        });
                        // 使用配置项渲染
                    });

                </script>

                <div id="div_bar" style="width: 700px; height: 500px;display: inline-block;margin-left: 50px;"></div>

            </div>

        </div>
    </div>

</div>

</body>
</html>

